<template>
  <el-card shadow="never" class="search-form card-pb0 mb10">
    <el-form :model="searchParam">
      <el-row :gutter="20">
        <el-col
          v-for="(item, index) in columns"
          :key="index"
          v-bind="colProps(item.search.span)">
          <el-form-item>
            <template #label>
              <el-space :size="2">
                <span>{{ item.search.label ?? item.label }}</span>
                <el-tooltip v-if="item.search.tip" :content="item.search.tip" placement="top">
                  <el-icon><QuestionFilled /></el-icon>
                </el-tooltip>
              </el-space>
              <span>:</span>
            </template>
            <search-form-item :column="item" :search-param="searchParam" />
          </el-form-item>
        </el-col>
        <el-col v-bind="colProps()">
          <el-form-item class="search-form-suffix">
            <el-button type="primary" icon="Search" @click="$emit('search')">搜索</el-button>
            <!-- <el-button icon="RefreshLeft" @click="handleResetForm">重置</el-button> -->
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-card>
</template>

<script setup>
import SearchFormItem from './components/SearchFormItem.vue'

defineProps({
  columns: {
    type: Array,
    default: () => ([])
  },
  searchParam: {
    type: Object,
    default: () => ({})
  }
})

const emit = defineEmits(['search', 'reset'])

const colProps = (span = 1) => {
  return {
    xs: 24,
    sm: 12 * Math.min(2, span),
    md: 12 * Math.min(2, span),
    lg: 8 * Math.min(3, span),
    xl: 6 * Math.min(4, span)
  }
}

const handleResetForm = () => {
  emit('reset')
}
</script>

<style>
</style>